﻿
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
@Html.DropDownList("tinh", ViewBag.tinh as SelectList, "Chọn Tỉnh", new { @class = "form-control", id = "tinh" })<br />
<select class="form-control" id="huyen" name="huyen" ><option>chon huyen</option></select><br />
<select class="form-control" id="xa" name="xa" ><option>chon Xã</option></select><br />

@Scripts.Render("~/bundles/jquery")


<script type="text/jscript">
    $(function () {
        $('#tinh').change(function () {
            $.getJSON('/Dowdown/Huyen/' + $('#tinh').val(), function (data) {
                var items = '<option>Chọn Huyện </option>';
                $.each(data, function (i, state) {
                    items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
                });
                $('#huyen').html(items);
            });
        });

        $('#huyen').change(function () {
            $.getJSON('/Dowdown/xa/' + $('#huyen').val(), function (data) {
                var items = '<option>Chọn Xã</option>';
                $.each(data, function (i, city) {
                    items += "<option value='" + city.Value + "'>" + city.Text + "</option>";
                });
                $('#xa').html(items);
            });
        });
    });
</script>